<template>
    <el-row>
        <el-col :span="8">
            <el-card class="box-card">
                <div class="t_card">
                    <div class="user">
                        <img src="@/assets/user.png" alt="">
                    </div>
                    <div class="text">
                        <p class="name">Admin</p>
                        <p class="identity">超级管理员</p>
                    </div>
                </div>
                <div class="b_card">
                    <p>
                        上次登录时间：<span>2021-7-19</span>
                    </p>
                    <p>
                        上次登录地点：<span>武汉</span>
                    </p>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 20px;">
                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column v-for="(val,key) in tableLabel" :key="val" :prop="key" :label="val" />
                <!-- 
                    <el-table-column
                        prop="name"
                        label="课程">
                    </el-table-column>
                    <el-table-column
                        prop="todayBuy"
                        label="今日购买">
                    </el-table-column>
                    <el-table-column
                        prop="monthBuy"
                        label="本月购买">
                    </el-table-column>
                    <el-table-column
                        prop="totalBuy"
                        label="总购买">
                    </el-table-column> 
                -->
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16" style="padding-left: 10px;">
            <div class="price">
                <el-card v-for="item in countData"  :key="item.name" :body-style="{display: 'flex'}">
                    <div class="icon" :style="{backgroundColor: item.color}">
                        <i :class="`el-icon-${item.icon}`"></i>
                    </div>
                    <div class="num">
                        <p class="value">￥{{ item.value }}</p>
                        <p class="name">{{ item.name }}</p>
                    </div>
                </el-card>
            </div>
            <el-card style="height: 280px;">
                <div ref="echarts1" style="height: 280px;"></div>
            </el-card>
            <div class="graph">
                <el-card>
                    <div ref="echarts2" style="height: 260px;"></div>
                </el-card>
                <el-card>
                    <div ref="echarts3" style="height: 240px;"></div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import {getDataApi} from "@/api/index";
import * as echarts from 'echarts';
export default {
    data () {
        return {
            tableData: [],
            tableLabel: {
                name: "课程",
                todayBuy: "今日购买",
                monthBuy: "本月购买",
                totalBuy: "总购买"
            },
            countData: [
                {
                name: "今日支付订单",
                value: 1234,
                icon: "success",
                color: "#2ec7c9",
                },
                {
                name: "今日收藏订单",
                value: 210,
                icon: "star-on",
                color: "#ffb980",
                },
                {
                name: "今日未支付订单",
                value: 1234,
                icon: "s-goods",
                color: "#5ab1ef",
                },
                {
                name: "本月支付订单",
                value: 1234,
                icon: "success",
                color: "#2ec7c9",
                },
                {
                name: "本月收藏订单",
                value: 210,
                icon: "star-on",
                color: "#ffb980",
                },
                {
                name: "本月未支付订单",
                value: 1234,
                icon: "s-goods",
                color: "#5ab1ef",
                },
            ],        
        }
    },
    created() {
        getDataApi().then((res) => {
            console.log(res);
            this.tableData = res.data.data.tableData;

            // 折线图
            // 基于准备好的dom，初始化echarts实例
            const myEcharts1 = echarts.init(this.$refs.echarts1);
            // 指定图表的配置项和数据
            let myEcharts1Option = {}
            // 处理数据xAxis
            const {orderData, userData, videoData } = res.data.data;
            const xAxis = Object.keys(orderData.data[0]);
            myEcharts1Option.xAxis = {
                data: orderData.date
            }
            myEcharts1Option.yAxis = {}
            myEcharts1Option.legend = {
                data: xAxis
            }
            myEcharts1Option.series = [];
            xAxis.forEach(key => {
                myEcharts1Option.series.push({
                    name: key,
                    data: orderData.data.map(item => item[key]),
                    type: 'line'
                })
            })
            // 使用刚指定的配置项和数据显示图表。
            myEcharts1.setOption(myEcharts1Option);

            // 柱状图
            const myEcharts2 = echarts.init(this.$refs.echarts2);
            const myEcharts2Option = {
                legend: {
                    // 图例文字颜色
                    textStyle: {
                    color: "#333",
                    },
                },
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: userData.map(item => item.date),
                    axisLine: {
                    lineStyle: {
                        color: "#17b3a3",
                    },
                    },
                    axisLabel: {
                    interval: 0,
                    color: "#333",
                    },
                },
                yAxis: [
                    {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                        color: "#17b3a3",
                        },
                    },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de"],
                series: [
                    {
                        name: "新增用户",
                        data: userData.map(item => item.new),
                        type: 'bar'
                    },
                    {
                        name: "活跃用户",
                        data: userData.map(item => item.active),
                        type: 'bar'
                    }
                ],
            }
            myEcharts2.setOption(myEcharts2Option); 

            // 饼图
            const myEcharts3 = echarts.init(this.$refs.echarts3);
            const myEcharts3Option = {
                tooltip: {
                    trigger: "item",
                },
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series: [{
                    data: videoData,
                    type: 'pie'
                }],
            }
            myEcharts3.setOption(myEcharts3Option); 
        })
    }
}
</script>
 
<style lang = "less" scoped>
    .t_card {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px;
        margin-bottom: 20px;
        .user {
            margin-right: 30px;
            img {
                width: 150px;
                height: 150px;
                border-radius: 50%;
            }
        }
        .text {
            .name {
                margin-bottom: 15px;
                font-size: 18px;
            }
            .identity {
                font-size: 12px;
                color: #999;
            }
        }
    }
    .b_card {
        p {
            line-height: 28px;
            font-size: 14px;
            color: #999999;
            span {
                color: #666666;
                margin-left: 60px;
            }
        }
    }
    .el-card__body, .el-main {
        padding: 0; 
    }
    .price {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .icon {
            width: 80px;
            height: 80px;
            line-height: 80px;
            color: #fff;
            text-align: center;
            font-size: 30px;
            margin-right: 15px;
        }
        .num {
            display: flex;
            flex-direction: column;
            justify-content: center;
            .value {
                font-size: 30px;
                margin-bottom: 10px;
                height: 30px;
                line-height: 30px;
            }
            .name {
                font-size: 14px;
                color: #999;
                text-align: center;
            }
        }
        .el-card {
            width: 32%;
            margin-bottom: 20px;
        }
    }
    .graph {
        margin-top: 20px;
        height: 260px;
        display: flex;
        justify-content: space-between;
        .el-card {
            width: 48%;
        }
    }
</style>